<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>舆情风险</title>
  <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/main.css">
  <style>
    /* 舆情风险 */
    .public-opinion-item h4 {
      font-size: 16px;
      color: #333333;
    }

    .public-opinion-risk {
      padding-top: 13px;
    }

    .public-option-info {
      float: left;
    }

    .public-option-box {
      padding: 20px 14px;
    }

    .public-option-info .public-title {
      font-size: 16px;
      color: #FFB335;
      padding-left: 10px;
      border-left: solid 2px #FFB335;
    }

    .percent20 {
      width: 20%;
    }

    .percent40 {
      width: 40%;
    }

    .percent40 {
      width: 40%;
    }

    .public-option-box {
      background: #fff;
      border-radius: 1px;
    }

    .p20 {
      margin-right: 20px;
    }

    .pr7 {
      margin-right: 7px;
    }

    .pl7 {
      margin-left: 7px;
    }

    .public-left {
      float: left;
    }

    .public-right {
      float: right;
    }
  </style>
</head>

<body>
  <div class="public-area">
    <div class="public-opinion-item">
      <h4>舆情风险</h4>
    </div>
    <div class="public-opinion-risk">
      <div class="public-option-info percent20">
        <div class="public-option-box p20">
          <div class="public-option-info_head">
            <h4 class="public-title">风险类型分布</h4>
          </div>
          <div class="public-option-info_body">
            <div class="charts" id="pieChart" style="height:320px;"></div>
          </div>
        </div>
      </div>
      <div class="public-option-info percent40">
        <div class="public-option-box pr7">
          <div class="public-option-info_head clearfix">
            <div class="public-left">
              <h4 class="public-title">舆情信息走势</h4>
            </div>
            <div class="public-right">
              <select class="form-control">
                <option>1日</option>
                <option>2日</option>
                <option>3日</option>
                <option>4日</option>
                <option>5日</option>
              </select>
            </div>
          </div>
          <div class="public-option-info_body">
            <div class="charts" id="line1Chart" style="height:304px;"></div>
          </div>
        </div>
      </div>
      <div class="public-option-info percent40">
        <div class="public-option-box pl7">
          <div class="public-option-info_head clearfix">
            <div class="public-left">
              <h4 class="public-title">信号信息走势</h4>
            </div>
            <div class="public-right">
              <select class="form-control">
                <option>1日</option>
                <option>2日</option>
                <option>3日</option>
                <option>4日</option>
                <option>5日</option>
              </select>
            </div>
          </div>
          <div class="public-option-info_body">
            <div class="charts" id="line2Chart" style="height: 304px;"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="./js/jquery-2.1.4.min.js"></script>
  <script src="./js/echarts.js"></script>
  <script>
    $(function () {
      var data = [{
          value: 23,
          name: '风险类型1'
        },
        {
          value: 45,
          name: '风险类型2'
        },
        {
          value: 50,
          name: '风险类型3'
        },
        {
          value: 27,
          name: '风险类型4'
        },
        {
          value: 0,
          name: '风险类型5'
        }
      ]
      var myChart = echarts.init(document.getElementById('pieChart'));
      let colors = ['#f36154', '#3ec2ce', '#35a2f7', '#fead3a', '#d6d6d6']
      var option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          left: 'center',
          top: 'bottom',
          orient: 'vertical',
          icon: 'rect',
          itemWidth: 6,
          itemHeight: 6,
          align: 'auto',
          // data:data,
          formatter: function (params, index) {
            for (var i = 0; i < data.length; i++) {
              if (params == data[i].name) {
                // return `${params}${data[index].value}`
                return params + '    ' + data[i].value + '%'
              }
            }

          }
        },
        grid: {
          left: '5%',
          right: '5%',
          top: '5%',
        },
        series: [{
          name: '访问来源',
          type: 'pie',
          radius: ['50%', '65%'],
          center: ['50%', '30%'],
          avoidLabelOverlap: false,
          symbolSize: 1,
          symbol: 'circle',
          smooth: true,
          showSymbol: false,
          itemStyle: {
            borderColor: '#fff',
            borderWidth: 2,
            color: function (params) {
              return colors[params.dataIndex]
            }
          },
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: false,
              fontSize: '40',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: data
        }]
      };
      myChart.setOption(option);
      window.top.chartsList && window.top.chartsList.push(myChart)
    })

    $(function () {
      var myChart2 = echarts.init(document.getElementById('line1Chart'));
      var option2 = {
        // backgroundColor: "#08409f",
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['2021/01', '2021/02', '2021/03', '2021/04', '2021/05', '2021/06'],
          axisLine: { //  改变x轴颜色
            lineStyle: {
              color: '#DBDBDB 100%',
            }
          },
          axisLabel: { //  改变x轴字体颜色和大小
            textStyle: {
              color: "#dfdfdf",
              fontSize: 12
            },
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: ['#DBDBDB 100%'],
              width: 1,
              type: 'solid'
            }
          }
        },
        yAxis: {
          type: 'value',
          max: 100,
          axisLine: { //  改变y轴颜色
            show: false,
            lineStyle: {
              color: '#DBDBDB 100%',
            }
          },
          axisLabel: { //  改变y轴字体颜色和大小
            formatter: '{value} %',
            textStyle: {
              color: "#4d4d4d",
              fontSize: 12
            },
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ['#ecf2f2'],
              width: 1,
              type: 'solid'
            }
          }
        },
        tooltip: {
          trigger: 'axis',

          axisPointer: {
            lineStyle: {
              width: 1,
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: '#2B9DF8' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#2B9DF8' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            },
            label: {
              show: true,
              backgroundColor: '#fff',
              color: '#BDD8E9',
              borderColor: 'rgba(0,0,0,0)',
              shadowColor: 'rgba(0,0,0,0)',
              shadowOffsetY: 0
            },

          },
          backgroundColor: '#fff',
          textStyle: {
            color: '#5c6c7c'
          },
          padding: [10, 10],
          extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
        },
        series: [{
          symbolSize: 1,
          symbol: 'circle',
          smooth: true,
          showSymbol: false,
          markPoint: {
            symbol: "circle",
          },
          markLine: {
            symbol: "none",
            label: {
              normal: {
                show: true,
              }
            },
            lineStyle: {
              type: "dashed",
              color: '#f19149',
              width: 2
            },
            data: [{
              yAxis: 1500,
              label: {
                textStyle: {
                  color: '#abaf6e'
                },
                position: 'insideEndTop',
                formatter: '预警价'
              }
            }]
          },
          data: ['20', '40', '25', '60', '50', '70'],
          type: 'line',
          endLabel: {
            show: true,
            formatter: "{c}",
            color: '#fff',
            position: 'insideEndTop',
            // distance: 0,
            offset: [-60, -20],
            fontSize: 24,
          },
          itemStyle: {
            normal: {
              label: {
                show: true,
                color: "#fff",
                fontSize: 12
              },
              color: "#294E8F",
              borderColor: "3D7EEB",
              borderWidth: 2,
            }
          },
          lineStyle: {
            normal: {
              width: 1,
              color: '#2b9df6',
              shadowColor: "#3D7EEB",
              shadowBlur: 1
            }
          },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0.5,
                color: 'rgba(43,157,248,0.52)' // 0% 处的颜色
              }, {
                offset: 1,
                color: 'rgba(61,126,235,0)' // 100% 处的颜色
              }],
              global: false // 缺省为 false
            }
          }
        }]
      };
      myChart2.setOption(option2);
      window.top.chartsList && window.top.chartsList.push(myChart2)
    })
    
    $(function () {
      var myChart3 = echarts.init(document.getElementById('line2Chart'));
      var option3 = {
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['2021/01', '2021/02', '2021/03', '2021/04', '2021/05', '2021/06'],
          axisLine: { //  改变x轴颜色
            lineStyle: {
              color: '#DBDBDB 100%',
            }
          },
          axisLabel: { //  改变x轴字体颜色和大小
            textStyle: {
              color: "#dfdfdf",
              fontSize: 12
            },
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: ['#DBDBDB 100%'],
              width: 1,
              type: 'solid'
            }
          }
        },
        yAxis: {
          type: 'value',
          max: 100,
          axisLine: { //  改变y轴颜色
            show: false,
            lineStyle: {
              color: '#DBDBDB 100%',
            }
          },
          axisLabel: { //  改变y轴字体颜色和大小
            formatter: '{value} %',
            textStyle: {
              color: "#4d4d4d",
              fontSize: 12
            },
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ['#ecf2f2'],
              width: 1,
              type: 'solid'
            }
          }
        },
        tooltip: {
          trigger: 'axis',

          axisPointer: {
            lineStyle: {
              width: 1,
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: '#fab967' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#fab967' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            },
            label: {
              show: true,
              backgroundColor: '#fff',
              color: '#BDD8E9',
              borderColor: 'rgba(0,0,0,0)',
              shadowColor: 'rgba(0,0,0,0)',
              shadowOffsetY: 0
            },

          },
          backgroundColor: '#fff',
          textStyle: {
            color: '#5c6c7c'
          },
          padding: [10, 10],
          extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
        },
        series: [{
          symbolSize: 1,
          symbol: 'circle',
          smooth: true,
          showSymbol: false,
          markPoint: {
            symbol: "circle",
          },

          data: ['10', '20', '55', '30', '60', '30'],
          type: 'line',

          itemStyle: {
            normal: {
              color: "#fab967",
              borderColor: "3D7EEB",
              borderWidth: 2,
            }
          },
          lineStyle: {
            normal: {
              width: 1,
            }
          },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0.5,
                color: 'rgba(251,185,105,0.70)' // 0% 处的颜色
              }, {
                offset: 1,
                color: 'rgba(251,185,105,0.00)' // 100% 处的颜色
              }],
              global: false // 缺省为 false
            }
          }
        }]
      };
      myChart3.setOption(option3);
      window.top.chartsList && window.top.chartsList.push(myChart3)
    })
  </script>
</body>
</html>